<template >
  <div id="basic">
    <div class="title">儿童膳食测评报告</div>
    <div id="createTime">报告日期：{{ report_time }}</div>
    <el-divider  border-style="dashed"  style="border-color:#2AB28B">
      <div class="subTitle">基本信息</div>
    </el-divider>
    <div class="every">
      <div><span>姓名 </span><span>{{contents.username ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>性别 </span><span>{{contents.sex == 1 ? '女':'男' ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>出生日期：</span><span>{{ birth ?? '[]' }}</span></div>
    </div>
    <div class="every">
      <div><span>监护人姓名：</span><span>{{contents.guardian_name ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>监护人手机号：</span><span>{{contents.guardian_mobile ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>身高：</span><span>{{contents.weigh ?? '[]'}}CM</span></div>
    </div>
    <div class="every">
      <div><span>体重：</span><span>{{contents.height ?? '[]'}}KG</span></div>
    </div>
    <div class="every">
      <div><span>头围：</span><span>{{contents.touwei ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>出生身长：</span><span>{{contents.chushengsg ?? '[]'}}CM</span></div>
    </div>
    <div class="every">
      <div><span>出生体重：</span><span>{{contents.chushengtz ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>腹围：</span><span>{{contents.fuwei ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>血型：</span><span>{{contents.xuexing_value ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>民族：</span><span>{{contents.minzu_value ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>与监护人关系：</span><span>{{contents.guanxi_value ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>家长受教育程度：</span><span>{{contents.jiaoyu_value ?? '[]'}}</span></div>
    </div>
    <div class="every" style="width: 100%">
      <div><span>出生情况：</span><span>{{contents.birthSituation_value ?? '[]'}}</span></div>
    </div>

    <div class="symptom">
      <div class="params ">
        <div class="shu"></div>
        其他信息</div>
      <div class="symptom_content">
        <div>妊娠不良习惯：{{contents.Bad_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>妊娠疾病情况：{{contents.disease_value ?? '[]'}}</div>
      </div>
    </div>

    <div class="symptom">
      <div class="params ">
        <div class="shu"></div>
        孩子临床表现</div>
      <div class="symptom_content">
        <div>头发：{{contents.hair_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>眼睛：{{contents.eye_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>皮肤：{{contents.skin_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>口腔：{{contents.oralCavity_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>牙齿：{{contents.tooth_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>颈部：{{contents.neck_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>神经病变：{{contents.Neuropathy_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>神经症状：{{contents.symptoms_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>体征：{{contents.sign_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>骨骼：{{contents.bones_value ?? '[]'}}</div>
      </div>
    </div>

    <div class="symptom">
      <div class="params ">
        <div class="shu"></div>
        食物过敏</div>
      <div class="symptom_content">
        <div>过敏食物：{{contents.allergy_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>食物不耐受：{{contents.intolerance_value ?? '[]'}}</div>
      </div>
    </div>
    <div style="clear: both"></div>
    <div style="padding-top: 300px"></div>
    <div class="right-box-card" >
      <el-divider  border-style="dashed"  style="border-color:#2AB28B">
        <div class="subTitle">体成分分析</div>
      </el-divider>
      <div id="enerty">
        <div class="params">
          <div class="shu"></div>
          人体成分</div>
        <div id="analMan">
          <div id="imgMan"><img src="../../assets/img/analysis_man.png" style="width: 167px;height: 332px" alt=""></div>
          <div id="imgFat">脂肪 {{ info.Fat }} ({{ info.FatMin }}~{{ info.FatMax }})</div>
          <div id="imgBone">骨质 {{ info.Bone }} ({{ info.BoneMin }}~{{ info.BoneMax }})</div>
          <div id="imgProtein">蛋白质 {{ info.Protein }} ({{ info.ProteinMin }}~{{ info.ProteinMax }})</div>
          <div id="imgWater">水分 {{ info.Water }} ({{ info.WaterMin }}~{{ info.WaterMax }})</div>
        </div>
        <div id="right_1"><span class="right_content">体重：{{info.Weight}}</span>
          <div id="right_2"><span class="right_content">去脂体重：{{info.LBM}}</span>
            <div id="right_3"><span class="right_content">肌肉：{{info.Muscle}}</span>
              <div id="right_4"><span class="right_content">总水分：{{info.Water}}</span>
                <div id="right_5"><span class="right_content">细胞内液：{{info.ICW}}</span>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div style="clear: both"></div>
        <div style="float: left;width: 60%">
          <div class="params Basic">
            <div class="shu"></div>
            基本评估</div>
          <div id="BasicAssessment">
            <ul>
              <li class="bt"><span>测评指标</span><span>状态</span><span>测评信息</span><span>正常范围</span></li>
              <li class="element" :class="[info.Weightcolor]"><span>体重</span><span>{{ info.Weightkeyword }}</span><span>{{info.Weight}}kg</span><span>{{info.WeightMin}}～{{info.WeightMax}}</span></li>
              <li class="element" :class="[info.Musclecolor]"><span>肌肉</span><span>{{ info.Musclekeyword }}</span><span>{{info.Muscle}}kg</span><span>{{info.MuscleMin}}～{{info.MuscleMax}}</span></li>
              <li class="element" :class="[info.PBFcolor]"><span>体脂百分比</span><span>{{ info.PBFkeyword }}</span><span>{{info.PBF}}%</span><span>{{info.PBFMin}}～{{info.PBFMax}}</span></li>
              <li class="element" :class="[info.Bonecolor]"><span>骨质</span><span>{{ info.Bonekeyword }}</span><span>{{info.Bone}}kg</span><span>{{info.BoneMin}}～{{info.BoneMax}}</span></li>
              <li class="element" :class="[info.Watercolor]"><span>水分</span><span>{{ info.Waterkeyword }}</span><span>{{info.Water}}%</span><span>{{info.WaterMin}}～{{info.WaterMax}}</span></li>
              <li class="element" :class="[info.SMMcolor]"><span>骨骼肌</span><span>{{ info.SMMkeyword }}</span><span>{{info.SMM}}kg</span><span>{{info.SMMMin}}～{{info.SMMMax}}</span></li>
              <li class="element" :class="[info.BMIcolor]"><span>体质指数</span><span>{{ info.BMIkeyword }}</span><span>{{info.BMI}}kg/m²</span><span>{{info.BMIMin}}～{{info.BMIMax}}</span></li>
              <li class="element" :class="[info.WHRcolor]"><span>腰臀比</span><span>{{ info.WHRkeyword }}</span><span>{{info.WHR}}kg</span><span>{{info.WHRMin}}～{{info.WHRMax}}</span></li>
            </ul>
          </div>
        </div>
        <div id="ObesityRight">
          <div class="params Basic">
            <div class="shu"></div>
            体重管理</div>
          <div id="BasicWidth">
            <ul>
              <li><span class="weight_run">体重控制：</span><span class="weight_param">{{info.Weight_control}}kg</span></li>
              <li><span class="weight_run">脂肪控制量：</span><span class="weight_param">{{info.Fat_control}}kg</span></li>
              <li><span class="weight_run">肌肉控制量：</span><span class="weight_param">{{info.Muscle_control}}kg</span></li>
            </ul>
          </div>
          <div class="params Basic" style="margin-top: 10%;margin-bottom: 3%">
            <div class="shu"></div>
            肥胖分析</div>

          <div id="Obesity" style="float: left;">
            <div id="ObesityFat">62%<br/>脂肪</div>
            <div id="ObesityProtein">38%<br/>蛋白质</div>
          </div>

          <div id="ObesityContent">
            <div><el-checkbox v-model="fatHigh">体脂：高</el-checkbox></div>
            <div><el-checkbox v-model="fatNormal">体脂：正常</el-checkbox></div>
            <div><el-checkbox v-model="fatLow">体脂：低</el-checkbox></div>
          </div>


          <div class="params Basic" style="margin-top: 10%;margin-bottom: 3%;">
            <div class="shu"></div>
            腰臀比</div>
          <div style="width: 80%;margin-left: 5%">

            <div  class="analysis_waist" ><img src="../../assets/img/analysis_waist_pear.png" style="width: 55px;height: 60px" alt=""><div class="waist"><el-checkbox v-model="WaistHigh">梨形</el-checkbox></div></div>
            <div  class="analysis_waist" ><img src="../../assets/img/analysis_waist_normal.png" style="width: 55px;height: 60px" alt=""><div class="waist"><el-checkbox v-model="WaistNormal">正常</el-checkbox></div></div>
            <div  class="analysis_waist" ><img src="../../assets/img/analysis_waist_apple.png" style="width: 55px;height: 60px" alt=""><div class="waist"><el-checkbox v-model="WaistLow">苹果形</el-checkbox></div></div>

          </div>

        </div>
      </div>
      <div style="clear: both"></div>
      <div class="params Basic" style="margin-top: 100px">
        <div class="shu"></div>
        内脏脂肪指数</div>
      <div>
        <div id='viscus' >
          <span>内脏脂肪指数：</span>
          <span class="ViscusNumber">{{info.VFI}}</span>
          <span class="ViscusLow" v-if="info.VFI < 6" >过低</span>
          <span class="ViscusLow" v-else-if="info.VFI > 6 && info.VFI <= 10" >正常</span>
          <span class="ViscusNormal" v-else-if="info.VFI > 10 && info.VFI <= 15">高</span>
          <span class="ViscusType" v-else>超高</span>
        </div>

        <div class="fen">
          <div class="fens">
          </div>
          <div class="fenss">
            <div class="one">正常</div>
            <div class="one">高</div>
            <div class="one">超高</div>
          </div>
          <div class="fenssNumber"><span class="six">6</span> <span>10</span><span>15</span><span>18</span></div>
        </div>

        <div style="clear: both"></div>
        <div class="params Basic" style="margin-bottom: 30px">
          <div class="shu"></div>
          水肿分析</div>
        <div>
            <span>
              <img src="../../assets/img/analysis_edema_round.png" style="width: 220px;height: 220px;float: left;padding-left:60px" alt="">
            <div class='Intracellular'>细胞内液<br/>{{info.ICW}}kg</div>
            <div class='ECF'>细胞外液<br/>{{info.ECW}}kg</div>
            <div class='other'>其他</div>
            <div class='BodyMoisture'>身体水分率：<span><br/>{{ info.Water }}%</span></div>
            </span>
          <div id="edema">水肿系数：<span>{{info.Edema}}</span>正常范围：「{{info.EdemaMin}}～{{info.EdemaMax}}」</div>
          <div id="edemaType"><span><el-checkbox v-model="EdemaHigh">干燥</el-checkbox></span><span><el-checkbox v-model="EdemaNormal">正常</el-checkbox></span><span><el-checkbox v-model="EdemaLow">浮肿</el-checkbox></span></div>
        </div>


      </div>
      <div style="clear: both"></div>
      <div class="params Basic" style="margin-bottom: 30px">
        <div class="shu"></div>
        营养分析</div>
      <div id="Nutritional">
        <div>蛋白质：<el-checkbox v-model="proteinHigh">不足</el-checkbox><el-checkbox v-model="proteinNormal">正常</el-checkbox><el-checkbox v-model="proteinLow">过量</el-checkbox></div>
        <div>脂　肪：<el-checkbox v-model="FatHigh">不足</el-checkbox><el-checkbox v-model="FatNormal">正常</el-checkbox><el-checkbox v-model="FatLow">过量</el-checkbox></div>
        <div>无机盐：<el-checkbox v-model="FatHigh">不足</el-checkbox><el-checkbox v-model="FatHighNormal">正常</el-checkbox><el-checkbox v-model="FatHigh">过量</el-checkbox></div>
        <div>基础代谢（BMR）：<span>{{info.BMR}}</span> kcal</div>
      </div>
    </div>

    <div style="clear: both"></div>
    <div style="padding-top: 350px"></div>
      <el-divider  border-style="dashed"  style="border-color:#2AB28B">
        <div class="subTitle">膳食分析</div>
      </el-divider>
      <div class="images-wrapper topColor" v-if="kcalType === 1">
        <img src="../../assets/img/evaluation_top_bg.png" alt="" style="width: 100%;height: 100%;float: left;">
        <div class="images-content">
          您的营养摄入
        </div>
        <div class="images-lab">
          {{ letEnergy.energy }} <span>kcal</span>
        </div>
        <div class="images-right topBgColor">
          <img src="../../assets/img/evaluation_top_triangle.png" alt="" style="width:18px; height:11px;">
          超标 {{ letEnergy.energy - letEnergy.end }} kcal
        </div>
      </div>

      <div class="images-wrapper normalColor" v-else-if="kcalType === 2">
        <img src="../../assets/img/evaluation_normal_bg.png" alt="" style="width: 100%;height: 100%;float: left;">
        <div class="images-content">
          您的营养摄入
        </div>
        <div class="images-lab">
          {{ letEnergy.energy }} <span>kcal</span>
        </div>
        <div class="images-right normalBgColor">
          <img src="../../assets/img/evaluaction_normal_triangle.png" alt=""
               style="line-height:25px;width:17px; height:17px;">
          达标
        </div>
      </div>

      <div class="images-wrapper bottomColor" v-else-if="kcalType === 3">
        <img src="../../assets/img/evaluation_bottom_bg.png" alt="" style="width: 100%;height: 100%;float: left;">
        <div class="images-content">
          您的营养摄入
        </div>
        <div class="images-lab">
          {{  letEnergy.energy }} <span>kcal</span>
        </div>
        <div class="images-right bottomBgColor">
          <img src="../../assets/img/evaluaction_bottom_triangle.png" alt=""
               style="line-height:25px;width:17px; height:17px;">
          不足 {{  letEnergy.start - letEnergy.energy }} kcal
        </div>
      </div>


        <div id="params">
          <div class="shu"></div>
          详细参数 <span>一天膳食摄入总能量：{{  letEnergy.energy }}卡，距离标准范围差{{  letEnergy.start - letEnergy.energy }}卡，具体如下：</span></div>
        <div id="EnergyClass">
          <ul>
            <li class="bt"><span>元素</span><span>状态</span><span>分析值</span><span>参考范围</span></li>
            <li class="bt"><span>元素</span><span>状态</span><span>分析值</span><span>参考范围</span></li>
            <li class="element" :class="[letEnergy.color]"><span>能量</span><span>{{ letEnergy.keyword }}</span><span >{{  letEnergy.energy }}kcal</span><span>{{  letEnergy.start }}～{{ letEnergy.end }}</span></li>
            <li class="element" :class="[protein.color]"><span>蛋白质</span><span>{{ protein.keyword }}</span><span>{{ protein.energy }}g</span><span>{{ protein.start }}～{{ protein.end }}</span></li>
            <li class="element" :class="[fat.color]"><span>脂肪</span><span>{{ fat.keyword }}</span><span>{{ fat.energy }}g</span><span>{{ fat.start }}～{{ fat.end }}</span></li>
            <li class="element" :class="[carbohydrate.color]"><span>碳水化合物</span><span>{{ carbohydrate.keyword }}</span><span>{{ carbohydrate.energy }}g</span><span>{{ carbohydrate.start }}～{{ carbohydrate.end }}</span></li>
            <li class="element" :class="[calcium.color]"><span>钙</span><span>{{ calcium.keyword }}</span><span>{{ calcium.energy }}mg</span><span>{{ calcium.start }}～{{ calcium.end }}</span></li>
            <li class="element" :class="[sodium.color]"><span>钠</span><span>{{ sodium.keyword }}</span><span>{{ sodium.energy }}c</span><span>{{ sodium.start }}～{{ sodium.end }}</span></li>
            <li class="element" :class="[magnesium.color]"><span>镁</span><span>{{ magnesium.keyword }}</span><span>{{ magnesium.energy }}mg</span><span>{{ magnesium.start }}～{{ magnesium.end }}</span></li>
            <li class="element" :class="[iron.color]"><span>铁</span><span>{{ iron.keyword }}</span><span>{{ iron.energy }}mg</span><span>{{ iron.start }}～{{ iron.end }}</span></li>
            <li class="element" :class="[zinc.color]"><span>锌</span><span>{{ zinc.keyword }}</span><span>{{ zinc.energy }}mg</span><span>{{ zinc.start }}～{{ zinc.end }}</span></li>
            <li class="element" :class="[selenium.color]"><span>硒</span><span>{{ selenium.keyword }}</span><span>{{ selenium.energy }}μg</span><span>{{ selenium.start }}～{{ selenium.end }}</span></li>
            <li class="element" :class="[vitamin_a.color]"><span>维生素A</span><span>{{ vitamin_a.keyword }}</span><span>{{ vitamin_a.energy }}μgRE</span><span>{{ vitamin_a.start }}～{{ vitamin_a.end }}</span></li>
            <li class="element" :class="[vitamin_e.color]"><span>维生素E</span><span>{{ vitamin_e.keyword }}</span><span>{{ vitamin_e.energy }}mg</span><span>{{ vitamin_e.start }}～{{ vitamin_e.end }}</span></li>
            <li class="element" :class="[vitamin_b1.color]"><span>维生素B1</span><span>{{ vitamin_b1.keyword }}</span><span>{{ vitamin_b1.energy }}mg</span><span>{{ vitamin_b1.start }}～{{ vitamin_b1.end }}</span></li>
            <li class="element" :class="[vitamin_b2.color]"><span>维生素B2</span><span>{{ vitamin_b2.keyword }}</span><span>{{ vitamin_b2.energy }}mg</span><span>{{ vitamin_b2.start }}～{{ vitamin_b2.end }}</span></li>
            <li class="element" :class="[vitamin_c.color]"><span>维生素C</span><span>{{ vitamin_c.keyword }}</span><span>{{ vitamin_c.energy }}mg</span><span>{{ vitamin_c.start }}～{{ vitamin_c.end }}</span></li>
          </ul>
        </div>
    <div style="clear: both"></div>
    <div style="padding-top: 300px"></div>
        <div id="params">

          <div class="shu"></div>
          取餐建议
        </div>

        <div class="dietOn" v-for="item in diet_analysis" :key="item">
          <div class="time-botton">
            <img src="../../assets/img/evaluaction_service_icon.png" alt="" style="width:15px; height:15px;">
            {{ item.pName }}
          </div>
          <div class="plates">
            <div class="time-type time-left-color">早餐</div>
            <div class="der">
              <div style="margin-left:6%;padding-top: 6%;">
                <span class="plates-top-img" v-for="breakfast in item.早餐" :key="breakfast"><img :src=" 'http://'+baseUrl+'/' + breakfast.meal_image" alt=""  style="width: 100%;height: 100%"></span>
                <span class="plates-top-img" v-for="earlier in item.早点" :key="earlier"><img :src="'http://'+baseUrl+'/' + earlier.meal_image" alt=""  style="width: 100%;height: 100%"></span>
              </div>
            </div>
            <div class="platesFoods">
              <div>大小：{{ item.multiple }}倍</div>
              <div>早餐7:00: <span v-for="breakfast in item.早餐" :key="breakfast"><o class="foodsNames">{{  breakfast.food_name }}</o> 重量:{{ breakfast.weight }}g; </span></div>
              <div>早点10:00: <span v-for="earlier in item.早点" :key="earlier"><o class="foodsNames">{{  earlier.food_name }}</o> 重量:{{ earlier.weight }}g; </span></div>
            </div>
          </div>

          <div class="plates">
            <div class="time-type time-common-color">午餐</div>
            <div class="der">
              <div style="">
                <span class="plates-top-img" v-for="lunch in item.午餐" :key="lunch"><img :src=" 'http://'+baseUrl+'/' + lunch.meal_image" alt="" style="width: 100%;height: 100%"></span>
                <span class="plates-top-img" v-for="noon in item.午点" :key="noon"><img :src="'http://'+baseUrl+'/' + noon.meal_image" alt="" style="width: 100%;height: 100%"></span>
              </div>
            </div>

            <div class="platesFoods">
              <div>大小：{{ item.multiple }}倍</div>
              <div>午餐12:00: <span v-for="lunch in item.午餐" :key="lunch"><o class="foodsNames">{{  lunch.food_name }}</o> 重量:{{ lunch.weight }}g; </span></div>
              <div>午点15:00: <span v-for="noon in item.午点" :key="noon"><o class="foodsNames">{{  noon.food_name }}</o> 重量:{{ noon.weight }}g; </span></div>
            </div>
          </div>

          <div class="plates">
            <div class="time-type time-right-color">晚餐</div>
            <div class="der">
              <div style="margin-left:6%;padding-top: 6%;">
                <span class="plates-top-img" v-for="dinner in item.晚餐" :key="dinner"><img :src=" 'http://'+baseUrl+'/' + dinner.meal_image" alt="" style="width: 100%;height: 100%"></span>
                <span class="plates-top-img" v-for="late in item.晚点" :key="late"><img :src="'http://'+baseUrl+'/' + late.meal_image" alt="" style="width: 100%;height: 100%"></span>
              </div>
            </div>

            <div class="platesFoods">
              <div>大小：{{ item.multiple }}倍</div>
              <div>晚餐18:00: <span v-for="dinner in item.晚餐" :key="dinner"><o class="foodsNames">{{  dinner.food_name }}</o> 重量:{{ dinner.weight }}g; </span></div>
              <div>晚点21:00: <span v-for="late in item.晚点" :key="late"><o class="foodsNames">{{  late.food_name }}</o> 重量:{{ late.weight }}g; </span></div>
            </div>
          </div>

        </div>
        <div style="clear: both"></div>
        <div class="params ">
          <div class="shu"></div>
          喂养建议</div>
        <span>{{ form.elText }}</span>
        <div style="clear: both"></div>
        <div class="params " style="margin-top: 20px">
          <div class="shu"></div>
          营养建议</div>
        <span>{{ form.elTextTwo }}</span>
        <div style="clear: both"></div>
        <div class="params " style="margin-top: 20px">
          <div class="shu"></div>
          医生建议</div>
        <span>{{ form.elTextThree }}</span>

      </div>
</template>

<script setup>
import {defineComponent, onMounted, ref, watch} from 'vue';
import {useRoute, useRouter} from "vue-router"
import http, {baseUrl} from "../../utils/http";
import {ElMessage} from "element-plus";
import * as api from "../../api/loginHttp";
import * as echarts from 'echarts'
const contents = ref({})
const reportId = ref()
const groupId = ref()
const id = ref()

const username = ref()
const guardian = ref()
const birthStatus = ref()
const router = useRouter()
const route = useRoute()
const hospital_name = ref()
const report_time = ref()
const onBmishow = ref(1)
const info = ref({});
const  fatHigh = ref(false)
const  fatNormal = ref(false)
const  fatLow = ref(false)
const  WaistHigh = ref(false)
const  WaistNormal = ref(false)
const  WaistLow = ref(false)
const  EdemaHigh = ref(false)
const  EdemaNormal = ref(false)
const  EdemaLow = ref(false)
const  proteinHigh = ref(false)
const  proteinNormal = ref(false)
const  proteinLow = ref(false)
const  FatHigh = ref(false)
const  FatNormal = ref(false)
const  FatLow = ref(false)
const FatHighNormal = ref(true)
const birth = ref()

const form = ref({
  elText:'1111',
  elTextTwo:'222222',
  elTextThree:'333333',
})

const letEnergy = ref({'energy': 0, 'start':0, 'end':0})
const protein = ref({'energy': 0, 'start':0, 'end':0})
const fat = ref({'energy': 0, 'start':0, 'end':0})
const carbohydrate= ref({'energy': 0, 'start':0, 'end':0})
const calcium = ref({'energy': 0, 'start':0, 'end':0})
const sodium = ref({'energy': 0, 'start':0, 'end':0})
const magnesium = ref({'energy': 0, 'start':0, 'end':0})
const iron = ref({'energy': 0, 'start':0, 'end':0})
const zinc = ref({'energy': 0, 'start':0, 'end':0})
const selenium = ref({'energy': 0, 'start':0, 'end':0})
const vitamin_a =ref({'energy': 0, 'start':0, 'end':0})
const vitamin_e = ref({'energy': 0, 'start':0, 'end':0})
const vitamin_b1 = ref({'energy': 0, 'start':0, 'end':0})
const vitamin_b2 = ref({'energy': 0, 'start':0, 'end':0})
const vitamin_c =ref({'energy': 0, 'start':0, 'end':0})
const diet_analysis = ref({})

const onHome = async () => {
  await router.push({'path': '/Home'})
}
const kcalType = ref(2)

import PrintJS from 'print-js'

const fetchData = async () => {
  reportId.value = route.params.reportId
  groupId.value = route.params.groupId
  id.value =  route.params.id

  username.value = route.params.username
  guardian.value = route.params.guardian
  birthStatus.value = route.params.birth

  http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=> {

    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
    }else{

    }
    birth.value = $getTimes(res.data.data.contents.birth)
    contents.value = res.data.data.contents;

    hospital_name.value = res.data.data.hospital_name
    report_time.value = res.data.data.times

    if(res.data.data.feed_advice != '' && res.data.data.feed_advice != null) {
      form.value.elText = res.data.data.feed_advice;
    } else {
      form.value.elText = '当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对儿童的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n' +
          '给儿童烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n' +
          '每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。';
    }

    if(res.data.data.nutrition_advice != '' && res.data.data.nutrition_advice != null) {
      form.value.elTextTwo = res.data.data.nutrition_advice;
    } else {
      form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
          '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      if(contents._rawValue.hair_value !='' || contents._rawValue.oralCavity_value != '' || contents._rawValue.neck_value != '' || contents._rawValue.Neuropathy_value != '' || contents._rawValue.symptoms_value != '') {
        form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
            '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      } else if(contents._rawValue.eye_value !='' ) {
        form.value.elTextTwo = '平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n' +
            '长期摄入不足是导致维生素A缺乏的主要原因，儿童维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。';
      } else if(contents._rawValue.skin_value !='' ) {
        form.value.elTextTwo = '谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n' +
            '富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以儿童日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。';
      } else if(contents._rawValue.sign_value !='' ) {
        form.value.elTextTwo = '足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障儿童生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致儿童正餐不按量食用。\n' +
            '营养不良的儿童，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。';
      } else if(contents._rawValue.sign_value !='') {
        form.value.elTextTwo = '奶和奶制品是儿童钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。'
      }
    }

    form.value.elTextThree = res.data.data.doctor_advice;

    // contents.births.value = '2077-07-07'
  })


  http.get('api/report/getreport?id='+id.value+'&reportId='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
    if(res.data.code === 0) {
      ElMessage.error(res.data.msg)
    }


    let data = res.data.data.component;
    info.value.Fat = data.Fat;
    info.value.FatMin = data.FatMin;
    info.value.FatMax = data.FatMax;

    info.value.Bone = data.Bone;
    info.value.BoneMin = data.BoneMin;
    info.value.BoneMax = data.BoneMax;

    info.value.Protein = data.Protein;
    info.value.ProteinMin = data.ProteinMin;
    info.value.ProteinMax = data.ProteinMax;

    info.value.Water = data.Water;
    info.value.WaterMin = data.WaterMin;
    info.value.WaterMax = data.WaterMax;

    info.value.Weight = data.Weight;
    info.value.WeightMin = data.WeightMin;
    info.value.WeightMax = data.WeightMax;

    info.value.LBM = data.LBM;
    info.value.LBMMin = data.LBMMin;
    info.value.LBMMax = data.LBMMax;

    info.value.Muscle = data.Muscle;
    info.value.MuscleMin = data.MuscleMin;
    info.value.MuscleMax = data.MuscleMax;

    info.value.ICW = data.ICW;
    info.value.ICWMin = data.ICWMin;
    info.value.ICWMax = data.ICWMax;

    info.value.PBF = data.PBF;
    info.value.PBFMin = data.PBFMin;
    info.value.PBFMax = data.PBFMax;

    info.value.SMM = data.SMM;
    info.value.SMMMin = data.SMMMin;
    info.value.SMMMax = data.SMMMax;

    info.value.BMI = data.BMI;
    info.value.BMIMin = data.BMIMin;
    info.value.BMIMax = data.BMIMax;

    info.value.WHR = data.WHR;
    info.value.WHRMin = data.WHRMin;
    info.value.WHRMax = data.WHRMax;

    info.value.Weight_control = data.Weight_control;
    info.value.Fat_control = data.Fat_control;
    info.value.Muscle_control = data.Muscle_control;
    // 内脏指数
    info.value.VFI = data.VFI;
    info.value.VFIMin = data.VFIMin;
    info.value.VFIMax = data.VFIMax;
    // 水中系数
    info.value.Edema = data.Edema;
    info.value.EdemaMin = data.EdemaMin;
    info.value.EdemaMax = data.EdemaMax;
    // 细胞外液
    info.value.ECW = data.ECW;
    // 基础代谢
    info.value.BMR = data.BMR;
    // 身体水分率
    // info.value.Water = (data.Water * 100).toFixed(2);
    if (data.PBF < data.PBFMin) {
      fatHigh.value = true;
    } else if (data.PBF >= data.PBFMin && data.PBF <= data.PBFMax) {
      fatNormal.value = true;
    } else if (data.PBF > data.PBFMax) {
      fatLow.value = true;
    }

    if (data.WHR < data.WHRMin ) {
      WaistHigh.value = true;
    } else if (data.WHR >=  data.WHRMin  && data.WHR <=  data.WHRMax) {
      WaistNormal.value = true;
    } else if (data.WHR >  data.WHRMax) {
      WaistLow.value = true;
    }
    // 水肿指标
    if (data.Edema < data.EdemaMin) {
      EdemaHigh.value = true;
    } else if (data.Edema >= data.EdemaMin && data.Edema <= data.EdemaMax) {
      EdemaNormal.value = true;
    } else if (data.Edema > data.EdemaMax) {
      EdemaLow.value =true;
    }
    // 蛋白质
    if (data.Protein < data.ProteinMin) {
      proteinHigh.value = true;
    } else if (data.Protein >= data.ProteinMin && data.Protein <= data.ProteinMax) {
      proteinNormal.value = true;
    } else if (data.Protein > data.ProteinMax) {
      proteinLow.value =true;
    }
    //脂肪
    if (data.Fat < data.FatMin) {
      FatHigh.value = true;
    } else if (data.Fat >= data.FatMin && data.Protein <= data.FatMax) {
      FatNormal.value = true;
    } else if (data.Fat > data.FatMax) {
      FatLow.value =true;
    }

    // 处理指标参数
    info.value.Weightkeyword = '✔ 正常';
    info.value.Weightcolor = 'everyBlack';
    if ( data.Weight < data.WeightMin) {
      info.value.Weightkeyword = '▼ 不足';
      info.value.Weightcolor = 'everyRed';
    } else if( data.Weight >  data.WeightMax) {
      info.value.Weightkeyword = '▲ 超标';
      info.value.Weightcolor = 'everyOrange';
    }

    info.value.Musclekeyword = '✔ 正常';
    info.value.Musclecolor = 'everyBlack';
    if ( data.Muscle < data.MuscleMin) {
      info.value.Musclekeyword = '▼ 不足';
      info.value.Musclecolor = 'everyRed';
    } else if( data.Muscle >  data.MuscleMax) {
      info.value.Musclekeyword = '▲ 超标';
      info.value.Musclecolor = 'everyOrange';
    }

    info.value.PBFkeyword = '✔ 正常';
    info.value.PBFcolor = 'everyBlack';
    if ( data.PBF < data.PBFMin) {
      info.value.PBFkeyword = '▼ 不足';
      info.value.PBFcolor = 'everyRed';
    } else if( data.PBF >  data.PBFMax) {
      info.value.PBFkeyword = '▲ 超标';
      info.value.PBFcolor = 'everyOrange';
    }

    info.value.Bonekeyword = '✔ 正常';
    info.value.Bonecolor = 'everyBlack';
    if ( data.Bone < data.BoneMin) {
      info.value.Bonekeyword = '▼ 不足';
      info.value.Bonecolor = 'everyRed';
    } else if( data.Bone >  data.BoneMax) {
      info.value.Bonekeyword = '▲ 超标';
      info.value.Bonecolor = 'everyOrange';
    }

    info.value.Waterkeyword = '✔ 正常';
    info.value.Watercolor = 'everyBlack';
    if ( data.Water < data.WaterMin) {
      info.value.Waterkeyword = '▼ 不足';
      info.value.Watercolor = 'everyRed';
    } else if( data.Water >  data.WaterMax) {
      info.value.Waterkeyword = '▲ 超标';
      info.value.Watercolor = 'everyOrange';
    }

    info.value.SMMkeyword = '✔ 正常';
    info.value.SMMcolor = 'everyBlack';
    if ( data.SMM < data.SMMMin) {
      info.value.SMMkeyword = '▼ 不足';
      info.value.SMMcolor = 'everyRed';
    } else if( data.SMM >  data.SMMMax) {
      info.value.SMMkeyword = '▲ 超标';
      info.value.SMMcolor = 'everyOrange';
    }

    info.value.BMIkeyword = '✔ 正常';
    info.value.BMIcolor = 'everyBlack';
    if ( data.BMI < data.BMIMin) {
      info.value.BMIkeyword = '▼ 不足';
      info.value.BMIcolor = 'everyRed';
    } else if( data.BMI >  data.BMIMax) {
      info.value.BMIkeyword = '▲ 超标';
      info.value.BMIcolor = 'everyOrange';
    }

    info.value.WHRkeyword = '✔ 正常';
    info.value.WHRcolor = 'everyBlack';
    if ( data.WHR < data.WHRMin) {
      info.value.WHRkeyword = '▼ 不足';
      info.value.WHRcolor = 'everyRed';
    } else if( data.WHR >  data.WHRMax) {
      info.value.WHRkeyword = '▲ 超标';
      info.value.WHRcolor = 'everyOrange';
    }



  })
  let params = {
    'groupId': groupId.value,
    'id': id.value,
    'reportId': reportId.value,

    'username': username.value,
    'guardian': guardian.value,
    'birth': birthStatus.value,
  }
  if(data.data.code == 0) {
    ElMessage.error(data.data.msg)
    await router.push({'path':'/Evaluation/' + groupId.value +'/'+ id})
  }

  if(!data.data.data.diet_analysis) {
    ElMessage.error(data.data.msg)
    await router.push({'path':'/Evaluation/' + groupId.value +'/'+ id})
  }
  for(let i = 0; i< data.data.data.diet_analysis.length; i++) {
    switch (i){
      case 0:
        data.data.data.diet_analysis[i]['pName'] = '周一';
        break
      case 1:
        data.data.data.diet_analysis[i]['pName'] = '周二';
        break
      case 2:
        data.data.data.diet_analysis[i]['pName'] = '周三';
        break
      case 3:
        data.data.data.diet_analysis[i]['pName'] = '周四';
        break
      case 4:
        data.data.data.diet_analysis[i]['pName'] = '周五';
        break
      case 5:
        data.data.data.diet_analysis[i]['pName'] = '周六';
        break
      case 6:
        data.data.data.diet_analysis[i]['pName'] = '周日';
        break
    }
  }
  diet_analysis.value = data.data.data.diet_analysis;
  for(let i = 0; i< data.data.data.diet.length; i++) {
    letEnergy._value.energy = letEnergy._value.energy + parseInt(data.data.data.diet[i]['energy']);
    protein._value.energy = protein._value.energy + parseInt(data.data.data.diet[i]['protein']);
    fat._value.energy = fat._value.energy + parseInt(data.data.data.diet[i]['fat']);
    carbohydrate._value.energy = carbohydrate._value.energy + parseInt(data.data.data.diet[i]['carbohydrate']);
    calcium._value.energy = calcium._value.energy + parseInt(data.data.data.diet[i]['calcium']);
    sodium._value.energy = sodium._value.energy + parseInt(data.data.data.diet[i]['sodium']);
    magnesium._value.energy = magnesium._value.energy + parseInt(data.data.data.diet[i]['magnesium']);
    iron._value.energy = iron._value.energy + parseInt(data.data.data.diet[i]['iron']);
    zinc._value.energy = zinc._value.energy + parseInt(data.data.data.diet[i]['zinc']);
    selenium._value.energy = selenium._value.energy + parseInt(data.data.data.diet[i]['selenium']);
    vitamin_a._value.energy = vitamin_a._value.energy + parseInt(data.data.data.diet[i]['vitamin_a']);
    vitamin_e._value.energy = vitamin_e._value.energy + parseInt(data.data.data.diet[i]['vitamin_e']);
    vitamin_b1._value.energy = vitamin_b1._value.energy + parseInt(data.data.data.diet[i]['vitamin_b1']);
    vitamin_b2._value.energy = vitamin_b2._value.energy + parseInt(data.data.data.diet[i]['vitamin_b2']);
    vitamin_c._value.energy = vitamin_c._value.energy + parseInt(data.data.data.diet[i]['vitamin_c']);
  }
  letEnergy._value.start = data.data.data.packAge[0].start_package;
  letEnergy._value.end = data.data.data.packAge[0].end_package;
  letEnergy._value.keyword = '✔ 正常';
  letEnergy._value.color = 'everyBlack';

  if ( letEnergy._value.energy < letEnergy._value.start) {
    letEnergy._value.keyword = '▼ 不足';
    letEnergy._value.color = 'everyRed';
    kcalType.value = 3
  } else if( letEnergy._value.energy > letEnergy._value.end) {
    letEnergy._value.keyword = '▲ 超标';
    letEnergy._value.color = 'everyOrange';
    kcalType.value = 1
  }


  protein._value.start = data.data.data.packAge[1].start_package;
  protein._value.end = data.data.data.packAge[1].end_package;
  protein._value.keyword = '✔ 正常';
  protein._value.color = 'everyBlack';
  if ( protein._value.energy < protein._value.start) {
    protein._value.keyword = '▼ 不足';
    protein._value.color = 'everyRed';
  } else if( protein._value.energy > protein._value.end) {
    protein._value.keyword = '▲ 超标';
    protein._value.color = 'everyOrange';
  }

  fat._value.start = data.data.data.packAge[2].start_package;
  fat._value.end = data.data.data.packAge[2].end_package;
  fat._value.keyword = '✔ 正常';
  fat._value.color = 'everyBlack';
  if ( fat._value.energy < fat._value.start) {
    fat._value.keyword = '▼ 不足';
    fat._value.color = 'everyRed';
  } else if( fat._value.energy > fat._value.end) {
    fat._value.keyword = '▲ 超标';
    fat._value.color = 'everyOrange';
  }

  carbohydrate._value.start = data.data.data.packAge[3].start_package;
  carbohydrate._value.end = data.data.data.packAge[3].end_package;
  carbohydrate._value.keyword = '✔ 正常';
  carbohydrate._value.color = 'everyBlack';
  if ( carbohydrate._value.energy < carbohydrate._value.start) {
    carbohydrate._value.keyword = '▼ 不足';
    carbohydrate._value.color = 'everyRed';
  } else if( carbohydrate._value.energy > carbohydrate._value.end) {
    carbohydrate._value.keyword = '▲ 超标';
    carbohydrate._value.color = 'everyOrange';
  }

  calcium._value.start = data.data.data.packAge[4].start_package;
  calcium._value.end = data.data.data.packAge[4].end_package;
  calcium._value.keyword = '✔ 正常';
  calcium._value.color = 'everyBlack';
  if ( calcium._value.energy < calcium._value.start) {
    calcium._value.keyword = '▼ 不足';
    calcium._value.color = 'everyRed';
  } else if( calcium._value.energy > calcium._value.end) {
    calcium._value.keyword = '▲ 超标';
    calcium._value.color = 'everyOrange';
  }

  sodium._value.start = data.data.data.packAge[5].start_package;
  sodium._value.end = data.data.data.packAge[5].end_package;
  sodium._value.keyword = '✔ 正常';
  sodium._value.color = 'everyBlack';
  if ( sodium._value.energy < sodium._value.start) {
    sodium._value.keyword = '▼ 不足';
    sodium._value.color = 'everyRed';
  } else if( sodium._value.energy > sodium._value.end) {
    sodium._value.keyword = '▲ 超标';
    sodium._value.color = 'everyOrange';
  }

  magnesium._value.start = data.data.data.packAge[6].start_package;
  magnesium._value.end = data.data.data.packAge[6].end_package;
  magnesium._value.keyword = '✔ 正常';
  magnesium._value.color = 'everyBlack';
  if ( magnesium._value.energy < magnesium._value.start) {
    magnesium._value.keyword = '▼ 不足';
    magnesium._value.color = 'everyRed';
  } else if( magnesium._value.energy > magnesium._value.end) {
    magnesium._value.keyword = '▲ 超标';
    magnesium._value.color = 'everyOrange';
  }

  iron._value.start = data.data.data.packAge[7].start_package;
  iron._value.end = data.data.data.packAge[7].end_package;
  iron._value.keyword = '✔ 正常';
  iron._value.color = 'everyBlack';
  if ( iron._value.energy < iron._value.start) {
    iron._value.keyword = '▼ 不足';
    iron._value.color = 'everyRed';
  } else if( iron._value.energy > iron._value.end) {
    iron._value.keyword = '▲ 超标';
    iron._value.color = 'everyOrange';
  }

  zinc._value.start = data.data.data.packAge[8].start_package;
  zinc._value.end = data.data.data.packAge[8].end_package;
  zinc._value.keyword = '✔ 正常';
  zinc._value.color = 'everyBlack';
  if ( zinc._value.energy < zinc._value.start) {
    zinc._value.keyword = '▼ 不足';
    zinc._value.color = 'everyRed';
  } else if( zinc._value.energy > zinc._value.end) {
    zinc._value.keyword = '▲ 超标';
    zinc._value.color = 'everyOrange';
  }

  selenium._value.start = data.data.data.packAge[9].start_package;
  selenium._value.end = data.data.data.packAge[9].end_package;
  selenium._value.keyword = '✔ 正常';
  selenium._value.color = 'everyBlack';
  if ( selenium._value.energy < selenium._value.start) {
    selenium._value.keyword = '▼ 不足';
    selenium._value.color = 'everyRed';
  } else if( selenium._value.energy > selenium._value.end) {
    selenium._value.keyword = '▲ 超标';
    selenium._value.color = 'everyOrange';
  }

  vitamin_a._value.start = data.data.data.packAge[10].start_package;
  vitamin_a._value.end = data.data.data.packAge[10].end_package;
  vitamin_a._value.keyword = '✔ 正常';
  vitamin_a._value.color = 'everyBlack';
  if ( vitamin_a._value.energy < vitamin_a._value.start) {
    vitamin_a._value.keyword = '▼ 不足';
    vitamin_a._value.color = 'everyRed';
  } else if( vitamin_a._value.energy > vitamin_a._value.end) {
    vitamin_a._value.keyword = '▲ 超标';
    vitamin_a._value.color = 'everyOrange';
  }

  vitamin_e._value.start = data.data.data.packAge[11].start_package;
  vitamin_e._value.end = data.data.data.packAge[11].end_package;
  vitamin_e._value.keyword = '✔ 正常';
  vitamin_e._value.color = 'everyBlack';
  if ( vitamin_e._value.energy < vitamin_e._value.start) {
    vitamin_e._value.keyword = '▼ 不足';
    vitamin_e._value.color = 'everyRed';
  } else if( vitamin_e._value.energy > vitamin_e._value.end) {
    vitamin_e._value.keyword = '▲ 超标';
    vitamin_e._value.color = 'everyOrange';
  }

  vitamin_b1._value.start = data.data.data.packAge[12].start_package;
  vitamin_b1._value.end = data.data.data.packAge[12].end_package;
  vitamin_b1._value.keyword = '✔ 正常';
  vitamin_b1._value.color = 'everyBlack';
  if ( vitamin_b1._value.energy < vitamin_b1._value.start) {
    vitamin_b1._value.keyword = '▼ 不足';
    vitamin_b1._value.color = 'everyRed';
  } else if( vitamin_b1._value.energy > vitamin_b1._value.end) {
    vitamin_b1._value.keyword = '▲ 超标';
    vitamin_b1._value.color = 'everyOrange';
  }

  vitamin_b2._value.start = data.data.data.packAge[13].start_package;
  vitamin_b2._value.end = data.data.data.packAge[13].end_package;
  vitamin_b2._value.keyword = '✔ 正常';
  vitamin_b2._value.color = 'everyBlack';
  if ( vitamin_b2._value.energy < vitamin_b2._value.start) {
    vitamin_b2._value.keyword = '▼ 不足';
    vitamin_b2._value.color = 'everyRed';
  } else if( vitamin_b2._value.energy > vitamin_b2._value.end) {
    vitamin_b2._value.keyword = '▲ 超标';
    vitamin_b2._value.color = 'everyOrange';
  }

  vitamin_c._value.start = data.data.data.packAge[14].start_package;
  vitamin_c._value.end = data.data.data.packAge[14].end_package;
  vitamin_c._value.keyword = '✔ 正常';
  vitamin_c._value.color = 'everyBlack';
  if ( vitamin_c._value.energy < vitamin_c._value.start) {
    vitamin_c._value.keyword = '▼ 不足';
    vitamin_c._value.color = 'everyRed';
  } else if( vitamin_c._value.energy > vitamin_c._value.end) {vitamin_c
    vitamin_c._value.keyword = '▲ 超标';
    vitamin_c._value.color = 'everyOrange';
  }

  setTimeout(() => {
    print('print-all')
  }, 2000)

}

function $getTimes(params) {
  let date = new Date(params);
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}


onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.right-box-card{
  margin-left: 0%;
  margin-top: 0%;
  position: static;
  top: calc(0px);
  width: 100%;

}

#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}
#basic #createTime {
  font-size: 16px;
  color:#999999;
  float: right;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}
.shu {
  width: 5px;
  height: 30px;
  background: #2AB28B;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
}
.subTitle {
  font-size: 30px;
  text-align: center;
  height: 30px;
  color: #2AB28B;
  /*border-bottom: 1px dashed  red;*/
}
.every {
  height: 35px;
  line-height: 35px;
  min-width: 33%;
  float: left;
  font-weight: bold;
}
#basic .symptom {
  text-align: left;
  line-height: 35px;
  float: left;
}
#basic .symptom .every {
  width: 30%;
  float: left;
}
.symptom_content{
  width: 100%;
  float: left;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
overflow: hidden;
}
#analMan {
  margin-top: 2%;
  text-align: center;
  color: #fff;
  width: 60%;
  float:left;

}
#analMan #imgMan {
  float: left;
}
#analMan #imgFat {
  margin-left: 33%;
  width: 269px;
  height: 35px;
  line-height: 35px;
  background: #E88F73;
  opacity: 1;
}
#analMan #imgBone {
  margin-left: 33%;
  width: 269px;
  height: 53px;
  line-height: 53px;
  background: #B1D964;
  opacity: 1;
}
#analMan #imgProtein {
  margin-left: 33%;
  width: 269px;
  height: 53px;
  line-height: 53px;
  background: #E8BA73;
  opacity: 1;
}
#analMan #imgWater {
  margin-left: 33%;
  width: 269px;
  height: 193px;
  line-height: 193px;
  background: #6BA9E4;
  opacity: 1;
}
#right_1 {
  float:left;
  background: url('../../assets/img/analysis_man_right_1.png');
  width: 269px;
  height: 327px;
  margin-top: 26px;
  color: #fff;
  text-align: right;
  font-size: 12px;
}
#right_2 {
  float:left;
  background: url('../../assets/img/analysis_man_right_2.png');
  width: 268px;
  height: 294px;
  margin-top: 16px;
  color: #fff;
  text-align: right;
}
#right_3 {
  float:left;
  background: url('../../assets/img/analysis_man_right_3.png');
  width: 206px;
  height: 247px;
  margin-top: 30px;
  color: #fff;
  text-align: right;
}
#right_4 {
  float:left;
  background: url('../../assets/img/analysis_man_right_4.png');
  width: 160px;
  height: 196px;
  margin-top: 36px;
  color: #fff;
}
#right_5 {
  float:left;
  background: url('../../assets/img/analysis_man_right_5.png');
  width: 86px;
  height: 75px;
  margin-top: 105px;
  color: #fff;
}

.right_content {
  text-align: right;
  padding-right: 7px;
  padding-top: 20px;
}

.Basic {
  margin-top: 20px;
}
#BasicAssessment {
}
#BasicAssessment .bt {
  background: #F7F7F7;
  color: #fff;
}

#BasicAssessment .bt span {
  width: 25%;
  float: left;
  text-align: center;
  color: #999999;
  line-height: 30px;
}

#BasicAssessment ul li {
  width: 100%;
  display: inline-block;
  margin: 0;
}

#BasicAssessment .element span {
  width: 25%;
  float: left;
  text-align: center;
  line-height: 60px;
}
#WeightAssessment {
  width: 30%;
}
#Obesity {
  background: url('../../assets/img/analysis_man_right_round.png');
  width: 122px;
  height: 122px;
  color:#fff;
  font-size: 12px;
  margin-left: 10%;

}
#ObesityContent{
  margin-left: 50%;
}
#ObesityRight{
  float: left;
  width: 35%;
  margin-left: 5%;
}
#ObesityRight ul li {
  border:1px solid #eee;
  width: 310px;
  height: 55px;
  font-size: 18px;
  color: #999999;
  background: #F7F7F7;
  line-height: 55px;
  list-style-type:none;
  text-align: right;
  margin-left: -30px;
}
#ObesityRight ul .weight_run {

}
#ObesityRight ul li .weight_param{
  color: #333333;
  padding-right: 30%;
}
#Obesity #ObesityFat {
  float: left;
  margin-top: 45%;
  margin-left: 20%;
}
#Obesity #ObesityProtein {
  margin-top: 25%;
  margin-left: 60%;
}
.analysis_waist{
  float: left;
  width: 33%;
}
.fen {
  width: 129%;
  height: 30px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-left: -15%;
}
.fenss {
  text-align: center;
}
#viscus {
  margin-top: 9px;
  margin-left: 5.5%;
  color: #333333;
  font-size: 18px;
  width: 100%;
}
.ViscusNumber {
  font-size: 50px;
  color: #E8B973;
}

.ViscusType {
  font-size: 16px;
  color: #fff;
  width: 100px;
  height: 68px;
  border-radius: 30px;
  background: #E8B973;
  padding: 0 20px;
  margin-left: 20px;
}

.ViscusNormal {
  font-size: 16px;
  color: #fff;
  width: 100px;
  height: 68px;
  border-radius: 30px;
  background: green;
  padding: 0 20px;
  margin-left: 20px;
}

.ViscusLow {
  font-size: 16px;
  color: #fff;
  width: 100px;
  height: 68px;
  border-radius: 30px;
  background: red;
  padding: 0 20px;
  margin-left: 20px;
}

.fen .fenssNumber {
  width: 100%;
}
.fen .fenssNumber .six {
  width: 2%;
  text-align: left;
  color: #999999;
  font-size: 14px;
}
.fen .fenssNumber span {
  width: 32.33%;
  float: left;
  text-align: right;
  color: #999999;
  font-size: 14px;
}
.Intracellular {
  position: absolute;
  margin-top:40px;
  margin-left:80px;
  width: 55px;
  height: 59px;
  font-size: 12px;
  color:#fff;
  -moz-transform: rotate(-70deg);
  -webkit-transform: rotate(-70deg);
  display: block;
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}

.ECF {
  position: absolute;
  margin-top:17px;
  margin-left:179px;
  width: 55px;
  height: 59px;
  font-size: 12px;
  color:#fff;
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  display: block;
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}
.other{
  position: absolute;
  margin-top:160px;
  margin-left:209px;
  width: 55px;
  height: 59px;
  font-size: 12px;
  color:#fff;
  -moz-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  display: block;
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}
.BodyMoisture {
  position: absolute;
  margin-top:80px;
  margin-left:140px;
  color:#999999;
  font-size: 12px;
}
.BodyMoisture span{
  font-size: 18px;
  font-weight:bold;
  color: #333333;
}
#edema {
  padding-top: 5%;
  margin-left: 40%;
  font-size: 18px;
  color: #666666;
}
#edema span{
  font-size: 50px;
}
#edemaType {
  margin-left: 40%;
  width: 500px;
  background: red;
}
#edemaType span{
  text-align: center;
  float: left;
  width: 120px;
}
#Nutritional {
  margin-left: 6%;
}
#Nutritional span{
  font-size: 25px;
  color:#2AB28B;
}

.everyRed {
  color:red;
}


.everyBlack {
  color:#333333;
}


.images-wrapper {
  width: 100%;
  position: relative;
  height: 173px;
  font-weight: bold;
}
.foodsNames {
  color:red;
}


.images-content {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(55% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 18px;

}

.service_plate {
  background: url('../../assets/img/evaluaction_service_plate.png') center no-repeat;
}

.dietOn {
  height: 510px;
}


.everyOrange {
  color:orange;
}

.time-botton {
  background-color: #2AB28B;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 42px 0 0 40px;
  text-align: center;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85CE61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}

.der{
  width: 240px;
  height: 174px;
  background: url("../../assets/img/evaluaction_service_plate.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.platesFoods{
  margin-top: 5px;
  margin-left: 8px;

  color: #333333;
  font-size: 16px;
}
.platesFoods div {
  padding-bottom: 18px;

}
.platesFoods span{
  color: #666666;
}

.plates {
  width: 33%;
  float: left;
}

.plates .plates-top-img {
  float: left;
  margin-left: 1%;
  width: 30%;
}

.time-left-color {
  background: #85CE61;
}

.time-common-color {
  background: #E8B973;
}

.time-right-color {
  background: #6EA9E0;
}


.images-lab {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(85% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 50px;
}

#params {
  margin-top: 3%;
  font-size: 22px;
  font-weight: bold;
}

#params span {
  font-size: 15px;
  color: #666;
  margin-left: 2%;
}

li {
  list-style-type: none;
}

#params ul {
  margin-left: 3%;
}

.topColor {
  color: #E8B973;
}

.topBgColor {
  border: 1px solid #E8B973;
  background-color: #E8B973;
}

.normalColor {
  color: #2AB28B;
}

.normalBgColor {
  border: 1px solid #2AB28B;
  background-color: #2AB28B;
}

.bottomColor {
  color: #6CA9E3;
}

.bottomBgColor {
  border: 1px solid #6CA9E3;
  background-color: #6CA9E3;
}

.images-lab span {
  font-size: 18px;
}

.images-right {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 15%;
  height: 20%;
  line-height: 34px;
  top: calc(95% - 54px);
  overflow: hidden;
  margin-left: 75%;
  font-size: 18px;
  border-radius: 30px;
  color: #fff;
  text-align: center;
}


#EnergyClass .bt {
  background: #F7F7F7;
  color: #fff;
}

#EnergyClass .bt span {
  width: 25%;
  float: left;
  text-align: center;
  color: #999999;
  line-height: 30px;
}

#EnergyClass ul li {
  width: 48%;
  display: inline-block;
  margin: 0;
}

#EnergyClass .element span {
  width: 25%;
  float: left;
  text-align: center;
  line-height: 60px;
  font-size: 14px;
}
</style>
